<script setup lang="ts">
import Storeages from '@/constants/storages'

const props = defineProps({
  width: { type: String, default: '100vw' },
  height: { type: String, default: '100vh' },
  src: { type: String, default: 'http://localhost:5174/example/store' },
})

const styles = {
  width: props.width,
  height: props.height,
}

const iFrame = ref<HTMLIFrameElement>()

interface SendMessage {
  cmd: string
  data: any
  beforeFunc?: Function
  afterFunc?: Function
}
function sendMessageToFeatureApp(params: SendMessage) {
  const { beforeFunc, afterFunc, ...msg } = params
  if (iFrame.value) {
    if (beforeFunc) beforeFunc()
    iFrame.value.onload = () => {
      iFrame.value?.contentWindow?.postMessage(msg, '*')
      if (afterFunc) afterFunc()
    }
  }
}

onMounted(() => {
  sendMessageToFeatureApp({
    cmd: 'install_featrue_app',
    data: {
      user: sessionStorage[Storeages.USER],
      system: sessionStorage[Storeages.SYSTEM],
      language: sessionStorage[Storeages.LANGUAGE],
    },
  })
})

defineExpose({ sendMessageToFeatureApp })
</script>
<template>
  <iframe
    ref="iFrame"
    id="iframe"
    :src="props.src"
    title="FeatureApp"
    :style="styles"
    frameborder="0"
  ></iframe>
</template>
<style scoped lang="scss">
/* sass,scss rules */
</style>
